<template>
	<!-- vue content -->
	<view class="ver common-body " style="position: relative;background-color: #e7f7efee;">
		<view style="position: relative;" class="">
			<image src="https://cdxf.5gsxt.cn/images/fo/1_bg@3x.jpg" mode="" class="match-width" style="height: 70vw;"
				@longpress="exitLogin">
			</image>
			<view class="pd-lr25 match-width pd-t20  corner20 blur-effect"
				style="position: absolute;top: 0;left:0;z-index: 99;margin-top: 59vw;height: 100vh;">

			</view>
			<view class="pd-lr25 match-width corner20"
				style="position: absolute;top: 0;left:0;z-index: 99;margin-top: 59vw;">

				<view class="hor ver-center match-width hor-center pd-tb25">
					<view class="ver ver-center" @click="onClickType(1)">
						<view class="font16 "
							:class="{'font-color-main':type==1,'font-text-color-explain':type!=1,'uni-bold':type==1}">
							站内参观培训</view>
						<view style="height: 2px;width: 70rpx" class="bg-main mg-t-10 corner10" v-if="type==1">
						</view>
					</view>
					<view class="ver ver-center mg-l-40" @click="onClickType(2)">
						<view class="font16 "
							:class="{'font-color-main':type==2,'font-text-color-explain':type!=2,'uni-bold':type==2}">
							站外培训演练</view>
						<view style="height: 2px;width: 70rpx" class="bg-main mg-t-10 corner10" v-if="type==2">
						</view>
					</view>
				</view>
				<view v-if="type==1">
					<view class="ver match-width mg-t-20" v-for="(item, index) in allList" :index="index" :key="index"
						@click="onClickItem(item,index)">
						<view class="corner20 bg-white pd-lr25 pd-tb25">
							<view class="hor ver-center">
								<view class="flex1 uni-bold" v-if="item.trainType==1">{{item.lessonName}}</view>
								<view class="flex1 uni-bold" v-if="item.trainType==2">队站参观体验</view>
								<view class="corner100 pd-lr15 bg-common hor ver-center pd-tb5"
									@click.stop="onClickGuide(item,index)">
									<image src="../../static/img/ic_guide.png" style="height: 30rpx;width: 30rpx">
									</image>
									<view class="mg-l-5 font12 font-text-color-black">导航</view>
								</view>
							</view>
							<view class="divider-hor mg-t-20"></view>
							<view v-if="item.trainType==1">
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">培训地址</view>
									<view class="font-text-color-black">{{item.trainAddress}}</view>
								</view>
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">开始时间</view>
									<view class="font-text-color-black">{{item.showTime}}</view>
								</view>
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">点位电话</view>
									<view class="font-text-color-black">{{item.addressPhone}}</view>
								</view>
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">联系电话</view>
									<view class="font-text-color-black">{{item.linkPhone}}</view>
								</view>

								<!-- <view class="hor match-width mg-t-10 ver-center" style=""
									@click.stop="onClickSign(item,index)">
									<view class="font-text-color-explain" style="width: 150rpx;">签到码</view>
									<view class="font-text-color-black">{{item.signMark}}</view>
									<image src="../../static/img/ic_copy.png" style="height: 30rpx;width: 30rpx;"
										class="mg-l-20">
									</image>
									<view class="font-text-color-explain font14 mg-l-5">复制</view>
								</view> -->
							</view>
							<view v-if="item.trainType==2">
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">队站名称</view>
									<view class="font-text-color-black">{{item.stationName}}</view>
								</view>
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">队站地址</view>
									<view class="font-text-color-black">{{item.stationAddress}}</view>
								</view>
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">开始时间</view>
									<view class="font-text-color-black">{{item.showTime}}</view>
								</view>
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">队站电话</view>
									<view class="font-text-color-black">{{item.stationPhone}}</view>
								</view>
								<view class="hor match-width mg-t-10" style="">
									<view class="font-text-color-explain" style="width: 150rpx;">联系电话</view>
									<view class="font-text-color-black">{{item.linkPhone}}</view>
								</view>
								<!-- 	<view class="hor match-width mg-t-10 ver-center" style=""
									@click.stop="onClickSign(item,index)">
									<view class="font-text-color-explain" style="width: 150rpx;">签到码</view>
									<view class="font-text-color-black">{{item.signMark}}</view>
									<image src="../../static/img/ic_copy.png" style="height: 30rpx;width: 30rpx;"
										class="mg-l-20">
									</image>
									<view class="font-text-color-explain font14 mg-l-5">复制</view>
								</view> -->
							</view>
							<!-- <view class="hor ver-center mg-t-10 match-width">
								<view class="flex1"></view>
								<view class="font-color-white bg-green pd-lr25 pd-tb5 corner10"
									@click.stop="onClickSign(item,index)" v-if="item.signStatus==0">签到</view>
								<view class="font-color-green bg-common pd-lr25 pd-tb5 corner10"
									v-if="item.signStatus==1" @click.stop="onClickSign(item,index)">已签到</view>
							</view> -->
							<view class="hor ver-center mg-t-10" v-if="item.trainType==1">
								<image :src="item.teacherPhoto" class="bg-common corner10"
									style="height: 80rpx;width: 80rpx"></image>
								<view class="mg-l-20">{{item.teacherName}}</view>
								<view class="flex1"></view>
								<view class="font-color-red bg-common pd-lr25 pd-tb5 corner10"
									@click.stop="onClickQuXiao(item,index)" v-if="canCancel(item,index)">取消预约</view>
							</view>
							<view class="hor ver-center mg-t-10" v-if="item.trainType==2">
								<view class="flex1"></view>
								<view class="font-color-red bg-common pd-lr25 pd-tb5 corner10"
									@click.stop="onClickQuXiao(item,index)" v-if="canCancel(item,index)">取消预约</view>
							</view>


							<view class="font-text-color-auxiliary mg-t-40 font12 text-center">如需取消，请于课程开始前2小时点击取消预约
							</view>
						</view>
					</view>
				</view>

				<view v-if="type==2">
					<view class="ver match-width mg-t-20" v-for="(item, index) in allList" :key="index"
						@click="onClickItem(item,index)">
						<view class="corner20 bg-white pd-lr25 pd-tb25">
							<view class="hor ver-center">
								<view class="flex1 uni-bold">{{item.companyName}}</view>
								<view class="corner100 pd-lr15 bg-common hor ver-center pd-tb5"
									@click.stop="onClickGuide(item,index)">
									<image src="../../static/img/ic_guide.png" style="height: 30rpx;width: 30rpx">
									</image>
									<view class="mg-l-5 font12 font-text-color-black">导航</view>
								</view>
							</view>
							<view class="divider-hor mg-t-20"></view>
							<view class="hor match-width mg-t-10" style="">
								<view class="font-text-color-explain" style="width: 150rpx;">培训地址</view>
								<view class="font-text-color-black">{{item.outAddress}}</view>
							</view>
							<view class="hor match-width mg-t-10" style="">
								<view class="font-text-color-explain" style="width: 150rpx;">开始时间</view>
								<view class="font-text-color-black">{{item.showTime}}</view>
							</view>
							<view class="hor match-width mg-t-10" style="">
								<view class="font-text-color-explain" style="width: 150rpx;">预约项目</view>
								<view>
									<span class="font-text-color-black" v-for="(item2,index2) in item.outTypeList"
										:key="index2">
										【{{item2}}】
									</span>
								</view>

							</view>
							<view class="hor match-width mg-t-10" style="">
								<view class="font-text-color-explain" style="width: 150rpx;">联系电话</view>
								<view class="font-text-color-black">{{item.companyPhone}}</view>
							</view>
							<view class="hor match-width mg-t-10 font-color-blue" style="" v-if="item.auditStatus==2">
								<view class="" style="width: 150rpx;">拒绝原因</view>
								<view class="">{{item.rejectReason}}</view>
							</view>
							<!-- <view class="hor ver-center mg-t-10 match-width">
								<view class="flex1"></view>
								<view class="font-color-white bg-green pd-lr25 pd-tb5 corner10"
									@click.stop="onClickSign(item,index)" v-if="item.signStatus==0">签到</view>
								<view class="font-color-green bg-common pd-lr25 pd-tb5 corner10"
									v-if="item.signStatus==1">已签到</view>
							</view> -->
							<!-- 	<view class="hor match-width mg-t-10 ver-center" style=""
								@click.stop="onClickSign(item,index)">
								<view class="font-text-color-explain" style="width: 150rpx;">签到码</view>
								<view class="font-text-color-black">{{item.signMark}}</view>
								<image src="../../static/img/ic_copy.png" style="height: 30rpx;width: 30rpx;"
									class="mg-l-20">
								</image>
								<view class="font-text-color-explain font14 mg-l-5">复制</view>
							</view> -->
							<view class="hor ver-center mg-t-20">
								<view class="flex1"></view>
								<view class="font-color-red bg-common pd-lr25 pd-tb5 corner10"
									v-if="item.auditStatus==0" @click="onClickCancelOut(item,index,0)">审核中点击取消</view>
								<view class="font-color-red bg-common pd-lr25 pd-tb5 corner10"
									v-if="item.auditStatus==1">已取消</view>
								<view class="font-color-red bg-common pd-lr25 pd-tb5 corner10"
									v-if="item.auditStatus==2">已拒绝</view>
								<view class="font-color-red bg-common pd-lr25 pd-tb5 corner10 mg-r-10"
									v-if="item.auditStatus==3" @click="onClickCancelOut(item,index,1)">审核通过点击取消</view>
								<view class="font-color-white bg-green pd-lr25 pd-tb5 corner10"
									v-if="item.auditStatus==3">审核通过</view>
							</view>



							<view class="font-text-color-auxiliary mg-t-40 font12 text-center">
								预约审核中时可以取消，审核通过后如需取消，请联系对应大队沟通
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="ver match-width" v-for="(item, index) in allList" :index="index" :key="index"
					@click="onClickItem(item,index)">
					<view class="bg-common corner10 pd-b10 mg-t-20">
						<view class="mg-t-20 pd-lr25">
							<view class="font16 uni-bold line2">{{item.lessonName}}</view>
							<view class="hor">
								<view class="font14 font-text-color-explain flex1">培训地址：{{item.trainAddress}}</view>
								<view class="font-color-main uni-bold pd-l-20" @click.stop="onClickGuide(item,index)">导航
								</view>
							</view>

							<view class="font14 font-text-color-explain">开始时间：{{item.showTime}}</view>
							<view class="hor ver-center mg-t-10">
								<view class="font14 font-text-color-explain flex1">{{item.teacherName}}（讲师）</view>
								<view class="bg-red pd-lr10 corner10 font-color-white"
									@click.stop="onClickQuXiao(item,index)" v-if="canCancel(item,index)">取消预约</view>
							</view>
							<view class="text-right font-color-red mg-t-20 font12">如需取消，请于课程开始前2小时点击取消预约</view>
						</view>
					</view>
				</view> -->
				<view style="height: 200rpx;"></view>
				<empty-layout id="empty" offsetTop="0vw" :emptyStatus="emptyStatus" positionMode="3" v-if="emptyShow"
					emptyHint="您还没有预约记录哦" @retry="onRefresh">
				</empty-layout>

				<u-popup v-model="showSign" mode="bottom" border-radius="14">
					<view class="ver pd-lr20 pd-tb50 ver-center">
						<view class="font18 uni-bold">{{signStatus.lessonOrderStatusStr}}</view>
						<image src="../../static/img/gzh_qrcode.jpg" style="width: 60vw;height: 60vw;"
							show-menu-by-longpress="true"></image>
						<view class="font12 font-text-color-explain">请先长按关注公众号，以便及时接收通知</view>
						<!-- 	<view class="font14 text-center font-text-color-main_body uni-bold pd-lr80">
							注意:请在培训当日培训开始前通过公众号发送【签到码】即可完成签到。</view> -->

						<view style="width: 400rpx;" class="pd-tb15  font-color-white text-center corner100 mg-t-40 "
							:class="{'bg-main':signStatus.signStatus==0,'bg-gray':signStatus.signStatus==1}"
							@click="requestSign(selectLessonOrderId,selectIndex)"
							v-if="signStatus.lessonOrderStatus==1">
							{{signStatus.signStatus==1?"已签到":"确定签到"}}
						</view>
						<view style="width: 400rpx;"
							class="pd-tb15  font-color-white text-center corner100 mg-t-40 bg-gray"
							v-if="signStatus.lessonOrderStatus==0">
							未开始无法签到
						</view>
						<view style="width: 400rpx;"
							class="pd-tb15  font-color-white text-center corner100 mg-t-40 bg-gray"
							v-if="signStatus.lessonOrderStatus==2">
							已结束无法签到
						</view>
						<view style="height: 120rpx;"></view>
					</view>
				</u-popup>
			</view>

		</view>
	</view>
</template>
<script>
	const timeUtils = require("@/js/dateUtils.js");

	let _this;
	export default {
		onShareAppMessage() {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '二小集专注社区内部二手',
				path: '/pages/tabbar/home'
			}
		},
		data() {
			return {
				authUser: null,
				wallet: null,
				isLogin: false,
				auditStatus: 0,
				emptyShow: false,
				emptyStatus: 1,

				action: 0, //0.无动作 1.进入签到

				totalHeight: 0,
				statusBarHeight: 0,

				scrollProgress: 0,

				simpleInfo: null,

				type: 1, //1站内参观培训  2.站外培训

				page: 1,
				size: 20,
				allList: [],
				isLoading: false, //是否加载中
				canLoadMore: true, //是否能加载更多

				//签到弹窗
				showSign: false,
				signStatus: {},
				selectItem: null,
				selectLessonOrderId: "",

				selectIndex: 0
			}
		},
		onLoad(option) {
			_this = this;
			this.initUser(option, this, true);
			this.action = option.action || this.action;
			this.selectLessonOrderId = option.selectLessonOrderId || this.selectLessonOrderId;
			console.log("=========================================")
			let qrCodeParams = this.getUrlParams(decodeURIComponent(option.q))
			this.action = qrCodeParams['action']
			this.selectLessonOrderId = qrCodeParams['selectLessonOrderId']

			console.log(this.action + "   " + this.selectLessonOrderId)
			console.log(option.q)


			if (option.q != null) {
				let url = decodeURIComponent(option.q);
				let param = url.split('?')[1];
				let params2 = param.split('=')
				this.dept = params2[1]

			}
			if (this.action == 1) {
				this.showSign = true;
				this.requestSignStatus(this.selectLessonOrderId);
			}
		},
		onShow() {
			let _this = this;

			this.initUser(null, this, true);
			this.onRefresh()

		},
		onReachBottom() {
			// console.log("onReachBottom");
			// if (this.isLoading) {
			// 	return
			// }
			// if (!this.canLoadMore) {
			// 	return
			// }
			// this.page++;
			// this.getData()
		},
		methods: {
			onPullDownRefresh() {
				// if (this.platform == 6) {
				// 	uni.redirectTo({
				// 		url: "taskList"
				// 	})
				// } else {
				this.page = 1;
				this.getData()
				// }
			},
			onRefresh() {
				this.page = 1;
				this.getData()
			},
			getData() {
				let url = ""

				if (this.type == 1) {
					// url = "orderRecord/listFromWxByOpenId";
					url = "orderRecord/wxOrderList";
				} else if (this.type == 2) {
					url = "orderRecord/wxOutOrderList";
					// url = "orderRecord/listFromWxByOpenId";
				}
				this.sendRequest({
					url: url,
					data: {
						pageNum: this.page,
						pageSize: this.size,
						orderStatus: 0
					},
					method: "GET",
					page: _this,
					success: function(res) {
						uni.stopPullDownRefresh();
						_this.emptyShow = false;
						_this.isLoading = false;

						const list = res.data.records;

						if (_this.page == 1) {
							_this.allList.splice(0, _this.allList.length)
						}

						for (var i = 0; i < list.length; i++) {
							_this.allList.push(list[i])
						}
						if (list != null && list.length >= _this.size) {
							_this.canLoadMore = true;
						} else {
							_this.canLoadMore = false;
						}
						if (_this.page == 1 && _this.allList.length == 0) {
							_this.emptyShow = true;
							_this.emptyStatus = 2;
						}
						console.log(_this.allList)

					},
					codeFail: function(e) {
						uni.stopPullDownRefresh();
						_this.isLoading = false;
						_this.emptyShow = true;
						_this.emptyStatus = 1;
					},
					fail: function(e) {
						uni.stopPullDownRefresh();
						_this.isLoading = false;
						_this.emptyShow = true;
						_this.emptyStatus = 1;
					}
				})
			},

			getUserInfo() {
				let _this = this;
				if (_this.authUser == null) {
					uni.stopPullDownRefresh();
					return
				}
				this.sendRequest({
					url: "api/auth/user/getById",
					data: {
						id: _this.authUser.id,
					},
					page: _this,
					success: function(res) {
						uni.stopPullDownRefresh();
						_this.user = res.data;
						_this.authUser = res.data;
						uni.setStorage({
							key: 'authUser',
							data: JSON.stringify(_this.authUser),
							success: function() {
								console.log('success');
							}
						});
					},
					fail: function(e) {
						uni.stopPullDownRefresh();
					}
				})
			},
			myInfo() {
				if (_this.authUser == null) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return;
				}
				uni.navigateTo({
					url: "/pages/my/myInfo"
				});

			},
			onClickQuXiao(item, index) {
				uni.showModal({
					title: '提示',
					content: "是否取消预约：" + item.lessonName,
					confirmText: "取消预约",
					success: function(res) {
						if (res.confirm) {
							_this.sendRequest({
								url: "orderRecord/wxUpdateOrderStatus",
								data: {
									orderRecordId: item.orderRecordId,
									orderStatus: 1
								},
								method: "POST",
								page: _this,
								success: function(res) {
									uni.showModal({
										title: '提示',
										content: "取消成功",
										confirmText: "我知道了",
										showCancel: false,
										success: function(res) {
											_this.onRefresh()
										}
									});
								},
								fail: function(e) {}
							})
						}

					}
				});

			},
			onClickCancelOut(item, index,type) {
				uni.showModal({
					title: '提示',
					content: type?"如需取消预约：请先联系大队确认":"是否取消预约：" + item.lessonName,
					confirmText: "取消预约",
					success: function(res) {
						if (res.confirm) {
							_this.sendRequest({
								url: "lessonOrder/cancelOutLessonOrder",
								data: {
									orderRecordId: item.orderRecordId,
									orderStatus: 1
								},
								method: "POST",
								page: _this,
								success: function(res) {
									uni.showModal({
										title: '提示',
										content: "取消成功",
										confirmText: "我知道了",
										showCancel: false,
										success: function(res) {
											_this.onRefresh()
										}
									});
								},
								fail: function(e) {}
							})
						}

					}
				});
			},
			requestSign(lessonOrderId, index) {
				_this.sendRequest({
					url: "lessonOrder/wxSign",
					data: {
						lessonOrderId: lessonOrderId,
						openId: uni.getStorageSync('openid')
					},
					method: "POST",
					page: _this,
					success: function(res) {
						// _this.showSign = false;
						_this.signStatus.signStatus = 1;
						_this.signStatus.lessonOrderStatusStr = "签到成功";

						_this.requestSignStatus(lessonOrderId);
						_this.onRefresh()

						uni.showModal({
							title: '提示',
							content: "签到成功",
							confirmText: "我知道了",
							showCancel: false,
							success: function(res) {}
						});

					},
					fail: function(e) {}
				});

			},
			requestSignStatus(lessonOrderId) {
				_this.sendRequest({
					url: "orderRecord/wxGetSignStatus",
					data: {
						lessonOrderId: lessonOrderId,
						openId: uni.getStorageSync('openid')
					},
					method: "GET",
					page: _this,
					success: function(res) {
						_this.signStatus = res.data;
						console.log("签到状态：")
						console.log(_this.signStatus)

					},
					fail: function(e) {}
				});

			},
			exitLogin() {
				uni.showModal({
					content: "是否确定退出登录",
					confirmText: "退出登录",
					confirmColor: "#FF0000",
					success: (res) => {
						if (res.confirm) {
							_this.sendRequest({
								url: "api/auth/user/exitLogin",
								data: {
									token: uni.getStorageSync('token'),
								},
								page: _this,
								success: function(res) {

								},
								fail: function(e) {}
							})
							_this.clearAuth()
							uni.reLaunch({
								url: "../tabbar/home"
							})

						}
					}
				})
			},
			canCancel(item, index) {
				let localTime = Date.parse(new Date());
				let time = timeUtils.getDateByTimestamp(item.showTime)
				if (localTime > time) {
					return false
				} else {
					return true
				}
			},
			onClickItem(item, index) {
				if (this.type == 1) {

					if (item.trainType == 1) {
						uni.navigateTo({
							url: "/pages/lesson/lessonDetail?lessonOrderId=" + item.lessonOrderId
						})
					} else if (item.trainType == 2) {
						uni.navigateTo({
							url: "/pages/lesson/lessonZNYY?lessonOrderId=" + item.lessonOrderId + "&detail=" + JSON
								.stringify(item)
						})
					}

				} else {

				}

			},
			onClickGuide(item, index) {

				let latitude = 0;
				let longitude = 0;

				if (this.type == 1) {
					if (item.trainType == 1) {
						latitude = item.addLatitude;
						longitude = item.addLongitude;
					} else if (item.trainType == 2) {
						latitude = item.stLatitude;
						longitude = item.stLongitude;
					}

				} else if (this.type == 2) {

				}

				console.log(item)
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: item.lessonName,
					address: item.trainAddress,
					success: function() {
						console.log('success');
					}
				});
			},
			onClickType(type) {
				this.type = type

				this.page = 1
				this.allList = []
				this.getData();
			},
			onClickSign(item, index) {
				// uni.setClipboardData({
				// 	data: item['signMark'], //要被复制的内容
				// 	success: () => { //复制成功的回调函数
				// 		uni.showToast({ //提示
				// 			title: '复制成功'
				// 		})
				// 	}
				// });
				this.selectLessonOrderId = item.lessonOrderId;
				this.selectIndex = index;
				this.showSign = true;
				this.requestSignStatus(this.selectLessonOrderId);
			},
			getUrlParams(url) {
				const params = {};
				if (!url) return params; // 无 URL 时返回空对象

				// 提取查询字符串部分
				const queryString = url.split('?')[1] || '';
				if (!queryString) return params; // 无查询参数时返回空对象

				// 拆分键值对
				queryString.split('&').forEach(pair => {
					const [encodedKey, ...encodedValues] = pair.split('=');
					const key = decodeURIComponent(encodedKey || ''); // 处理空键
					const value = encodedValues.length ?
						decodeURIComponent(encodedValues.join('=')) : ''; // 处理多个等号

					params[key] = value; // 重复参数时保留最后一个值
				});

				return params;
			}

		}
	}
</script>

<style>
	html,
	body,
	page {
		background-color: #e7f7efee;
	}

	.blur-effect {
		/* 设置背景模糊 */
		backdrop-filter: blur(40rpx);
		filter: blur(2rpx);
		/* other styles */
		background: rgba(231, 247, 239, 0.5);
		border: 1rpx solid white;
	}
</style>